<template>
  <div class="model-label-table-data-container">
    <common-border-table ref="tableData"
       :tableData="tableData"
       v-loading="loading"
       :table-title="tableTitle"
       :showRowOption="false">

      <template #icon="scope">
        <i :class="scope.row.icon" v-if="scope.row.iconType === 'element-ui' && scope.row.icon"></i>
      </template>

      <template #objectType="scope">
        <div style="text-align: center">
          <el-tag type="success" effect="dark" v-if="scope.row.classId === 'ModelDefinition'" size="small">模型</el-tag>
          <el-tag size="small" effect="dark" v-else>标签</el-tag>
        </div>
      </template>

    </common-border-table>

  </div>
</template>

<script>

import CommonBorderTable from '@/components/common/CommonBorderTable'
import {tableTitle, filterInfo} from '@/js/model/modelLabel'
import TableDataMixins from '@/components/mixins/table/TableDataMixins'
import {getModelChildrenLabelData} from '@/js/api/model/modelTree'

export default {
  name: 'ModelLabelTableData',
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  components: {
    CommonBorderTable
  },
  mixins: [TableDataMixins],
  methods: {
    async getChildrenData(){
      this.loading = true
      const treeData = await getModelChildrenLabelData(this.id)
      if (treeData.errorMsg){
        this.$msgAlert(treeData.errorMsg, 'error')
      } else {
        this.tableData = treeData.data
      }
      this.loading = false
    }
  },
  created(){
    this.initData(filterInfo, tableTitle)
    this.getChildrenData()
  }
}
</script>

<style lang="less">
  .model-label-table-data-container{
    height: inherit;
    overflow-y: hidden;
  }
</style>
